<template>
    <div>

        <div class="layui-row layui-col-space15 clearfix">
            <div class="layui-col-md16 left">
                <div data-fontsize="14" class="article-detail shadow">
                    <div class="article-tool">
                        <div style="float:left;">
                            <button class="layui-btn layui-btn layui-btn-xs" title="发布日期">
                                {{ news.adddate }}
                            </button>
                            <div class="layui-btn-group">
                                <button class="layui-btn layui-btn layui-btn-xs" title="浏览">
                                    <i class="fa fa-eye fa-fw"></i><span style="margin-left:3px;">{{ news.views }}</span>
                                </button>
                                <button class="layui-btn layui-btn layui-btn-xs" title="评论">
                                    <i class="fa fa-comments fa-fw"></i><span style="margin-left:3px;">0</span>
                                </button>
                            </div>
                        </div>

                    </div>
                    <div class="article-detail-title">
                        {{ news.title }}
                    </div>
                    <div class="article-detail-abstract">
                        <span class="layui-badge" @click="openIframe()">立即下载</span>
                        <span id="abstract">
                            {{ news.title }}
                        </span>
                    </div>
                    <div class="article-detail-content w-e-text">
                        <div v-html="news.contents">

                        </div>
                        <p>免费下载：默认密码8077</p>
                        <a :href="news.special" target="_blank">
                            <lay-button type="normal" fluid radius>免费下载</lay-button>
                        </a>

                        <p></p>
                        <lay-backtop target="#app" :showHeight="200" :bottom="100" bgcolor="#5FB878" icon="layui-icon-up"
                            circle></lay-backtop>
                        <div class="article-detail-copyright">
                            <p>版权声明：本文由<a href="/" style="color:#1E9FFF;margin:0 5px;">爱上歆随懿恫</a>原创出品，转载请注明出处！</p>
                            <p>本文链接：
                                <router-link :to="'/news/down?id=' + news.id" :title="news.title">{{ news.title
                                }}</router-link>

                            </p>
                        </div>
                    </div>
                </div>
                <div class="article-component">

                    <div class="component-box">
                        <a href="javascript:;" @click="openIframe()" class="praise" blog-event="praise"><i
                                class="fa fa-thumbs-up fa-fw"></i>下载（<span id="praiseCnt">{{ news.thumbsup }}</span>）
                        </a>
                        <!-- <a href="javascript:;" class="reword" blog-event="reword">赏</a> -->
                        <a href="javascript:;" @click="openIframe()" class="share" blog-event="share"><i
                                class="fa fa-share-alt fa-fw"></i>点赞（<span id="shareCnt">{{ news.views }}</span>）</a>
                    </div>
                </div>



            </div>
            <div class="layui-col-md8 right">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-sm12 layui-col-md24 padding0">
                        <div class="blog-card shadow">

                            <taobao></taobao>


                        </div>
                    </div>

                    <music></music>
                    <randomnew></randomnew>
                    <randompptVue></randompptVue>
                    <div class="layui-col-sm12 layui-col-md24">
                        <div class="blog-card shadow sr-rightmodule">
                            <div class="blog-card-title">
                                <span class="icon"><i class="layui-icon" aria-hidden="true">&#xe6c6;</i></span>
                                <span class="text">微信关注</span>
                            </div>
                            <ul class="blog-card-ul">
                                <li style="text-align: center;">
                                    <img src="/images/qrcode_for_gh_8044f5512351_258.jpg" />
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <!--右边悬浮 平板或手机设备显示-->
                <div class="category-toggle"><i class="fa fa-chevron-left"></i></div>
            </div>
        </div>
        <!-- 使用样式属性自定义 -->




        <!--遮罩-->
        <div class="blog-mask animated layui-hide"></div>
        <!--js-->

    </div>
</template>
<style>
.article-detail-content img,
image {
    width: 100% !important;
}
</style>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { layer } from "@layui/layer-vue";
import http from 'webosutils/lib/http';
import { useRoute, useRouter } from "vue-router";
import taobao from '../../components/card/taobao.vue'
import randompptVue from "../../components/card/randomppt.vue";
const news = ref([]) as any;
const data = ref([]) as any;
const lastarticle = ref([]) as any;
const nextarticle = ref([]) as any;
const isdata = ref([]) as any;
const conlist = ref([]) as any;
const handleBack = () => {
    window.history.back();
}
const document=window.document as any;
const router = useRouter();
const route = useRoute();
const ajax = () => {

    http.post("/v1/api/portalsite/GetNewDetails", { id: route.query.id }).then(res => {
        document.title = res.data.title;
        news.value = Object.freeze(res.data);
        let head = document.getElementsByTagName('head');
        let meta_keyword = document.createElement('meta');
        if (document.querySelector('meta[name="keywords"]')) {
            document.querySelector('meta[name="keywords"]').setAttribute('content',news.value.keyword)
        } else {
            meta_keyword.setAttribute('name', 'keywords')
            meta_keyword.setAttribute('content', news.value.keyword)
            head[0].appendChild(meta_keyword)
        }
        let meta_description = document.createElement('meta');
        if (document.querySelector('meta[name="description"]')) {
            document.querySelector('meta[name="description"]').setAttribute('content',"<img src='"+window.location.origin+news.value.biggic+"' title='"+news.value.title+"'/>" )
        } else {
            meta_description.setAttribute('name', 'description')
            meta_description.setAttribute('content',"<img src='"+news.value.biggic+"' title='"+window.location.origin+news.value.title+"'/>")
            head[0].appendChild(meta_description)
        }
        nextarticle.value = {
            data: res.nextarticle, isdata: res.nextarticle == null ? false : true
        };
        lastarticle.value = {
            data: res.lastarticle, isdata: res.lastarticle == null ? false : true
        }
    }).catch(res => {




    });



}


ajax();
const openIframe = () => {
    layer.open({
        type: 2,
        title: "免费下载" + news.value.title,
        resize: true,
        area: ['80%', '80%'],
        content: news.value.special
    })
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>